<template>
  <div>
    <el-form @submit.native.prevent :inline="true">
      <el-form-item>
        <el-date-picker
          v-model="queryDate"
          type="month"
          placeholder="选择月"
          :picker-options="pickerOptions"
          @change="handleDateQuery()"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="handleDateQuery()">查询</el-button>
        <el-button icon="el-icon-download" :loading="downloading" @click="handleDownload">
          下载
        </el-button>
      </el-form-item>
    </el-form>

    <c-table
      v-loading="loading"
      border
      header-row-class-name="mutiple-table-header"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { tableColumns, dataAdapter } from './mixins'

import { dataExport } from '@/credit/views/city/reportCity/reportMixins'

export default {
  components: {},
  props: {
    reportType: {
      type: Number,
      default: 5,
    },
    reportName: {
      type: String,
      default: '省担报表',
    },
  },
  data() {
    return {
      queryDate: '',
      pickerOptions: {
        disabledDate(time) {
          const date = new Date()
          let maxTime = new Date(date.getFullYear(), date.getMonth())
          return time < new Date(2020, 8) || time > maxTime
        },
      },

      loading: false,
      params: {
        index: 1,
        size: 15,
        'report_type.eq': this.reportType,
      },
      order: {
        load_date: 'desc',
      },
      tableName: 'report_month_detail_county_view',
      totalCount: 0,
      tableData: [],
      tableColumns: [
        { attrs: { label: '报送时间', prop: 'reportTime', align: 'center', minWidth: 100 } },
        ...tableColumns,
      ],

      // 下载
      downloading: false,
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {},
  created() {
    this.initParams()
  },
  mounted() {},
  methods: {
    initParams() {
      this.params['service_id.eq'] = this.clientId
      this.getData()
    },

    handleDateQuery() {
      this.params['year_number.eq'] = this.queryDate ? this.queryDate.getFullYear() : ''
      this.params['month_number.eq'] = this.queryDate ? this.queryDate.getMonth() + 1 : ''
      this.getData()
    },

    async getData(index = 1) {
      this.params.index = index
      this.loading = true
      const [res] = await this.fetchData(this.params, this.order)
      this.loading = false

      const data = (res && res.data) || {}
      this.totalCount = data.totalCount || 0
      this.tableData = (data.data || []).map(this.dataAdapter)
    },

    fetchData(params) {
      return this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, params, this.order)
      )
    },

    dataAdapter(item, index) {
      item = dataAdapter(item, index)
      item.reportTime = `${item.year_number || '-'}年${item.month_number || '-'}月`
      return item
    },

    async handleDownload() {
      this.downloading = true
      dataExport({
        columns: this.tableColumns,
        params: this.params,
        fetch: this.fetchData,
        adapter: this.dataAdapter,
        filename: this.reportName,
      }).finally(() => {
        this.downloading = false
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
